<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">

    <el-form-item class="el-form-item-label-cover" label="零件名称">
      <el-input class="el-input-item-cover" v-model="form.name"></el-input>
    </el-form-item>

    <el-form-item class="el-form-item-label-cover" label="零件价格">
      <el-input
        class="el-input-item-cover"
        v-model="form.price"
      ></el-input>
    </el-form-item>

    <el-form-item class="el-form-item-label-cover" label="添加数量">
      <el-input
        class="el-input-item-cover"
        v-model="form.num"
      ></el-input>
    </el-form-item>

  </el-form>

    <el-upload
      action="http://localhost:9090/part/uploadImg"
      list-type="picture-card"
      :limit="1"
      show-file-list
      :auto-upload="false"
      :on-change="change"
      multiple
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl"/>
    </el-dialog>


      <el-button type="primary" @click="submit" style="margin-top:10px" >添加</el-button>

  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
        num:'',
        url:'',
        form:{
            price:'',
            name:'',
            num:'',
            url:''
        },
      dataList: "",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    submit() {
      let config = {
        timeout: 30000,
        headers: {
          "Content-Type": "multipart/form-data", //设置headers
        },
      };
      const formData = new FormData();
      var that = this;
      // 首先判断是否上传了图片，如果上传了图片，将图片存入到formData中
      console.log("dataList:" + this.dataList);
      if (this.dataList) {
        that.dataList.forEach((item, index) => {
          // console.log(item)
          console.log("index:" + index);
          formData.append("partImg", item);
        });
      }
      console.log("formData.get(0):" + JSON.stringify(formData.get(0)));
      axios
        .post(
          "http://localhost:9090/part/uploadImg", //请求后端的url
          formData,
          config
        )
        .then((res) => {
          console.log("res.data:" + JSON.stringify(res.data));
          if (res.data.code == 200) {
            //上传成功
            this.url=res.data.data
            console.log("上传成功,url="+this.url);
            console.log("this.form.name"+this.form.name)
            console.log("this.form.price"+this.form.price)
         

            axios({
              method: "post",
              url: "http://localhost:9090/part/addPart",
              data: {
                name: this.form.name,
                price: this.form.price,
                url: this.url,
                num: this.form.num
              },
            })
              .then((res) => {
                this.$message({
                    message:"零件添加成功",
                    type:"success"
                })
                console.log("addPart成功，data:", res.data.data);
                this.form.speculateReason = res.data.data.speculateReason;
                this.form.repairReco = res.data.data.repairReco;
              })
              .catch((err) => {
                console.log(err);
                console.log("addPart");
              });
          } else {
            alert("上传失败");
          }
        })
        .catch((error) => {
          console.log("请求失败" + error);
        });
      //用户可以在上传完成之后将数组给清空，这里直接跳转到首页了，没有做清空的操作
    },
    change(file, fileList) {
      //将每次图片数组变化的时候，实时的进行监听，更改数组里面的图片数据
      var arr = [];
      fileList.forEach((item) => {
        arr.push(item.raw);
      });
      this.dataList = arr;
      console.log(arr);
    },
  },
};
</script>

<style>
.headerBg {
  background: #ccc !important;
}
.el-input-item-cover {
  width: 215px;
}
</style>

